import MainMenu from '../components/mainMenu';
import Lang from '../libs/i18';
import {Link} from 'react-router';
import {Config, Fetch} from '../libs/';
import {URL} from '../libs/Url';
import Panel from "../elements/Panel";
import Modal from "./../components/Modal/";

export default React.createClass({
    getInitialState(){
        return {
            open: false,
            static: {}
        }
    },
    componentDidMount(){
        Promise.all([
            Fetch(URL.QUICK_ACCESS_GET),
            Fetch(URL.STATISTIC_INFO_GET),
            Fetch(URL.GET_UNREADY_DEVICE),
        ])
            .then(res=> {
                this.setState({
                    static_news: res[1].newsCount,
                    static_activity: res[1].campaignCount,
                    static_notice: res[1].announcementCount,
                    static_class_photos: res[1].classroomCount,
                    static_class_honour: res[1].classCount,
                    static_class_teacher: res[1].teacherCount,
                    static_class_student: res[1].studentCount,
                });
            })
            .catch(e=> {
                console.log(e);
            });

        require.ensure(['../libs/jquery-vendor', 'jqueryui'],
            function () {
                require('../libs/jquery-vendor');
                require('jqueryui');
                // require('isotope_');
                var $gallery = $("#gallery"),
                    $trash = $("#trash");

                // Let the gallery items be draggable
                $("li", $gallery).draggable({
                    cancel: "a.ui-icon", // clicking an icon won't initiate dragging
                    revert: "invalid", // when not dropped, the item will revert back to its initial position
                    containment: "document",
                    helper: "clone",
                    cursor: "move"
                });

                // Let the trash be droppable, accepting the gallery items
                $trash.droppable({
                    accept: "#gallery > li",
                    classes: {
                        "ui-droppable-active": "ui-state-highlight"
                    },
                    drop: function (event, ui) {
                        Fetch(URL.QUICK_ACCESS_EDIT, {
                            body: {
                                quickentry: ui.helper.text().trim(),
                            }
                        })
                            .then(res=> {
                                deleteImage(ui.draggable);
                            })
                            .catch(e=> {
                                console.log(e);
                            });
                        // console.log(ui.helper.text().trim())

                    }
                });

                // Let the gallery be droppable as well, accepting items from the trash
                $gallery.droppable({
                    accept: "#trash li",
                    classes: {
                        "ui-droppable-active": "custom-state-active"
                    },
                    drop: function (event, ui) {
                        recycleImage(ui.draggable);
                    }
                });

                // Image deletion function
                var recycle_icon = "";

                function deleteImage($item) {
                    $item.fadeOut(function () {
                        var $list = $("ul", $trash).length ?
                            $("ul", $trash) :
                            $("<ul class='gallery ui-helper-reset'/>").appendTo($trash);

                        $item.find("a.ui-icon-trash").remove();
                        $item.append(recycle_icon).appendTo($list).fadeIn(function () {
                            $item
                            // .animate({ width: "48px" })
                                .find("img")
                                .animate({height: "36px"});
                        });
                    });
                }

                // Image recycle function
                var trash_icon = "";

                function recycleImage($item) {
                    console.log('A');
                    debugger;
                    // Fetch()
                    $item.fadeOut(function () {
                        $item
                            .find("a.ui-icon-refresh")
                            .remove()
                            .end()
                            .css("width", "96px")
                            .append(trash_icon)
                            .find("img")
                            .css("height", "72px")
                            .end()
                            .appendTo($gallery)
                            .fadeIn();
                    });
                }

                // Image preview function, demonstrating the ui.dialog used as a modal window
                function viewLargerImage($link) {
                    var src = $link.attr("href"),
                        title = $link.siblings("img").attr("alt"),
                        $modal = $("img[src$='" + src + "']");

                    if ($modal.length) {
                        $modal.dialog("open");
                    } else {
                        var img = $("<img alt='" + title + "' width='384' height='288' style='display: none; padding: 8px;' />")
                            .attr("src", src).appendTo("body");
                        setTimeout(function () {
                            img.dialog({
                                title: title,
                                width: 400,
                                modal: true
                            });
                        }, 1);
                    }
                }

                // Resolve the icons behavior with event delegation
                $("ul.gallery > li").on("click", function (event) {
                    var $item = $(this),
                        $target = $(event.target);

                    if ($target.is("a.ui-icon-trash")) {
                        deleteImage($item);
                    } else if ($target.is("a.ui-icon-zoomin")) {
                        viewLargerImage($target);
                    } else if ($target.is("a.ui-icon-refresh")) {
                        recycleImage($item);
                    }

                    return false;
                });
            },'home');

    },
    render(){
        const self = this;
        return (
            <div className="panel-inner">
                <div className="wrapper">
                    <div className="row">
                        <div className="col-md-8">
                            <div className="panel" style={{padding: 0}}>
                                <header className="panel-heading">
                                    {Lang.home.title_person_profile}
                                </header>
                                <div className="panel-body index-count">
                                    <ul>
                                        <li><a href="javascript:void(0);"><b>{this.state.static_news}</b>
                                            <p>{Lang.home.count_news}</p>
                                        </a></li>
                                        <li><a href="#"><b>{this.state.static_activity}</b>
                                            <p>{Lang.home.count_activity}</p>
                                        </a></li>
                                        <li><a href="#"><b>{this.state.static_notice}</b>
                                            <p>{Lang.home.count_notice}</p>
                                        </a></li>
                                        <li><a href="#"><b>{this.state.static_class_photos}</b>
                                            <p>{Lang.home.count_class_photo}</p>
                                        </a></li>
                                        <li><a href="#"><b>{this.state.static_class_honour}</b>
                                            <p>{Lang.home.count_class_honour}</p>
                                        </a></li>
                                        <li><a href="#"><b>{this.state.static_class_teacher}</b>
                                            <p>{Lang.home.count_class_teacher}</p>
                                        </a></li>
                                        <li><a href="#"><b>{this.state.static_class_student}</b>
                                            <p>{Lang.home.count_class_student}</p>
                                        </a></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div className="col-md-4">
                            <div className="panel" style={{padding: 0}}>
                                <div className="panel-body index-update">
                                    <h5>{Lang.software_update.title}：</h5>
                                    <p>{Lang.software_update.time}</p>
                                    <p>
                                        <b>{Lang.software_update.item_title}：</b>
                                        {
                                            Lang.software_update.update_item.map((item, index)=> {
                                                return <div key={index}>{item}</div>
                                            })
                                        }
                                    </p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br/>
                    <div className="row">
                        <div className="col-md-12">
                            <div className="panel">
                                <header className="panel-heading">
                                    {Lang.home.title_quick_access}
                                </header>
                                <div className="panel-body index-fast">
                                    <ul>
                                        <li>
                                            <Link to={Config.MENUS.NEWS_ADD}>
                                                <i className="fa fa-newspaper-o"></i>
                                                <p>{Lang.menus.NEWS_CREATE}</p>
                                            </Link>
                                        </li>
                                        <li>
                                            <Link to={Config.MENUS.ACTIVITIES_ADD}>
                                                <i className="fa fa-hdd-o"></i>
                                                <p>{Lang.menus.ACTIVITIES_CREATE}</p></Link></li>
                                        <li>
                                            <Link to={Config.MENUS.NOTICES_ADD}><i className="fa fa-volume-up"></i>
                                                <p>{Lang.menus.NOTICE_CREATE}</p></Link></li>

                                        <li>
                                            <Link to={Config.MENUS.HOMEWORK}><i className="fa fa-wpforms"></i>
                                                <p>{Lang.menus.HOMEWORK_CRATE}</p></Link></li>

                                        <li>
                                            <Link to={Config.MENUS.DAY_NEWS}><i className="fa fa-star"></i>
                                                <p>{Lang.menus.DAY_NEWS}</p></Link></li>

                                        <li>
                                            <Link to={Config.MENUS.CLASS_HONOUR}><i className="fa fa-bookmark-o"></i>
                                                <p>{Lang.menus.CLASS_INFO_HONOUR}</p></Link></li>

                                        <li>
                                            <Link to={Config.MENUS.CLASS_PHOTOS}><i className="fa fa-file-image-o"></i>
                                                <p>{Lang.menus.CLASS_INFO_PHOTO}</p></Link></li>

                                        <li>
                                            <Link to={Config.MENUS.TEACH_SCHEDULE}><i className="fa fa-calendar"></i>
                                                <p>{Lang.menus.TEACH_SCHEDULE}</p></Link></li>
                                    </ul>
                                    <button
                                        type="button"
                                        onClick={()=> {
                                            this.setState({
                                                open: true
                                            })
                                        }}
                                        className="btn btn-default btn-sm add"> + {Lang.home.add_quick_access}
                                    </button>
                                    <Modal
                                        className="modal-lg"
                                        open={self.state.open}>
                                        <Modal.Header
                                            onclose={()=> {
                                                self.setState({open: false, selected: ''})
                                            }
                                            }>{Lang.home.quick_access}</Modal.Header>
                                        <Modal.Body>
                                            <div className="ui-widget ui-helper-clearfix">

                                                <ul id="gallery" className="gallery ui-helper-reset ui-helper-clearfix">
                                                    <li className="ui-widget-content ui-corner-tr">
                                                        <i className="fa fa-newspaper-o"></i>
                                                        <p>待完善设备</p>
                                                    </li>
                                                    <li className="ui-widget-content ui-corner-tr">
                                                        <i className="fa fa-desktop"></i>
                                                        <p>设备监控</p>
                                                    </li>
                                                    <li className="ui-widget-content ui-corner-tr">
                                                        <i className="fa fa-newspaper-o"></i>
                                                        <p>发布新闻</p>
                                                    </li>
                                                    <li className="ui-widget-content ui-corner-tr">
                                                        <i className="fa fa-hdd-o"></i>
                                                        <p>发布活动</p>
                                                    </li>
                                                    <li className="ui-widget-content ui-corner-tr">
                                                        <i className="fa fa-volume-up"></i>
                                                        <p>发布通知</p>
                                                    </li>
                                                    <li className="ui-widget-content ui-corner-tr">
                                                        <i className="fa fa-wpforms"></i>
                                                        <p>报修反馈</p>
                                                    </li>
                                                    <li className="ui-widget-content ui-corner-tr">
                                                        <i className="fa fa-male"></i>
                                                        <p>新建教师</p>
                                                    </li>
                                                    <li className="ui-widget-content ui-corner-tr">
                                                        <i className="fa fa-user"></i>
                                                        <p>新建学生</p>
                                                    </li>
                                                    <li className="ui-widget-content ui-corner-tr">
                                                        <i className="fa fa-cloud-upload"></i>
                                                        <p>上传客户端</p>
                                                    </li>

                                                </ul>
                                                <div className="double-arrow"></div>
                                                <div id="trash" className="ui-widget-content ui-state-default ">

                                                </div>
                                            </div>


                                        </Modal.Body>
                                        <Modal.Footer
                                            onconfirm={()=> {
                                                this.setState({
                                                    open: false
                                                })
                                            }}
                                            onclose={()=> {
                                                console.log('close');
                                                this.setState({
                                                    open: false
                                                })
                                            }}
                                        >
                                        </Modal.Footer>
                                    </Modal>

                                </div>
                            </div>
                        </div>

                    </div>
                    <br/>
                    <div className="row">
                        <div className="col-md-12">
                            <div className="panel">
                                <header className="panel-heading">
                                    {Lang.home.title_help}
                                </header>
                                <div className="panel-body">
                                    <div className="index-help">
                                        <div className="col-md-8">
                                            <h4>{Lang.help_center.fqs}</h4>
                                            <ul>
                                                <li><a href="#">安道智能推送系统简介？</a></li>
                                                <li><a href="#">如何管理发布班级信息？</a></li>
                                                <li><a href="#">教学计划的添加与推送？</a></li>
                                                <li><a href="#">新闻、活动、通知的添加与管理？</a></li>
                                                <li><a href="#">如何进行课程表的编辑？</a></li>
                                                <li><a href="#">值日表的添加与管理</a></li>
                                                <li><a href="#">如何管理发布班级信息？</a></li>
                                                <li><a href="#">教学计划的添加与推送？</a></li>
                                                <li><a href="#">新闻、活动、通知的添加与管理？</a></li>
                                            </ul>
                                        </div>
                                        <div className="col-md-4 support">
                                            <p>
                                                <img alt="技术支持" src={require('../imgs/help_pic1.png')}/>
                                                <b>7 x 24</b></p>

                                            <p>{Lang.help_center.time_desc}</p>

                                        </div>
                                    </div>


                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        )
    }
})